<template>
	<view>

		<navigator url="/other_pages/all_pingjia/all_pingjia" hover-class="navigator-hover">跳转到all_pingjia</navigator>

		<!-- 搜索 -->
		<view class="header">
			<!-- 位置 -->
			<view class="location">
				<image src="../../static/home_imgs/location.png"></image>
				<view class="icon-text">江苏</view>
			</view>
			<!-- 搜索框 -->
			<view class="search">
				<image src="../../static/home_imgs/search.png"></image>
				<input type="text" placeholder="请输入商品名称">
			</view>
			<!-- 消息 -->
			<view class="location">
				<image src="../../static/home_imgs/message.png"></image>
				<view class="icon-text">消息</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
				indicator-active-color="#ffffff">
				<!-- 循环列表 -->
				<swiper-item v-for="(item,index) in swiperList" :key="item.id">
					<view class="swiper-item">
						<image :src="item.src" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<view class="category">
			<view v-for="(item,index) in categoryList" :key="item.id" :data-name="item.name" @click="category">
				<image :src="item.src"></image>
				<view class="category-text">{{item.name}}</view>
			</view>
		</view>
		<!-- 广告图 -->
		<image class="adventure"
			src="https://img30.360buyimg.com/pop/s1180x940_jfs/t1/146522/13/26620/74349/626bbbfeE4f33e0dd/8ad0c4b9ea20f89b.jpg.webps"
			mode="scaleToFill"></image>
		<!-- 优惠券 -->
		<view class="coupon">
			<view class="coupon-head">· 平台通用优惠券 ·</view>
			<scroll-view scroll-x="true" style="display:flex;width: 100vw;height: 25vw;" enable-flex>
				<!-- 循环列表 -->
				<view class="coupon-body" v-for="(item,index) in couponList" :key="item.id">
					<!-- 左边 -->
					<view class="coupon-left">
						<view class="amount">
							<text class="amount-text1">{{item.text1}}</text>
							<text class="amount-text2">{{item.text2}}</text>
						</view>
						<view class="coupon-date">{{item.text3}}</view>
					</view>
					<!-- 右边 -->
					<view class="coupon-right" @click="coupon">立即领取</view>
				</view>
			</scroll-view>
		</view>
		<view class="coupon-head">· 平台推荐店铺 ·</view>
		<!-- 店铺列表 -->
		<view>
			<view v-for="item in shopList" :key="item.id" class="shop">
				<!-- 左边头像 -->
				<view class="shop-img">
					<image :src="item.src"></image>
				</view>
				<!-- 右边介绍 -->
				<view class="shop-detail">
					<!-- 店铺名称 -->
					<view class="shop-detail-head">
						<view class="shop-text1">{{item.name}}</view>
						<view>
							<text class="shop-text2">评分</text>
							<text class="shop-text3">{{item.score}}</text>
						</view>
						<view class="shop-text4">No.{{item.id}}</view>
					</view>
					<!-- 星星 -->
					<view class="shop-detail-middle">
						<image class="star" v-for="index of 4" :key="index" src="../../static/home_imgs/star2.png">
						</image>
						<image class="star" src="../../static/home_imgs/star.png"></image>
					</view>
					<!-- 销量 -->
					<view class="shop-detail-bottom">
						<text class="shop-text5">销量{{item.sales}}</text>
						<view style="display: flex;">
							<view class="shop-detail-bottom-img">
								<image src="../../static/home_imgs/airplane.png" />
							</view>
							<text class="shop-text6">{{item.distance}}</text>
						</view>
						<view class="shop-detail-bottom-button" :data-id="item.id" @click="enter">进店</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var shopList = getApp().globalData.shopList
	var couponList = getApp().globalData.couponList
	export default {
		data() {
			return {
				couponList: [],
				swiperList: [{
						id: 1,
						src: "https://c-ssl.duitang.com/uploads/blog/202106/19/20210619125849_ef42c.jpg"
					},
					{
						id: 2,
						src: "https://c-ssl.duitang.com/uploads/blog/202106/19/20210619125858_9c326.jpg"
					},
					{
						id: 3,
						src: "https://c-ssl.duitang.com/uploads/blog/202106/19/20210619125858_9c326.jpg"
					},
					{
						id: 4,
						src: "https://c-ssl.duitang.com/uploads/blog/202106/19/20210619125856_84a2d.jpg"
					}
				],
				categoryList: [{
						id: 1,
						name: "新鲜水果",
						src: "https://img14.360buyimg.com/n0/jfs/t1/211534/39/9930/154202/6195e64aE7dc13153/5f0744ea47ccf3a1.jpg"
					},
					{
						id: 2,
						name: "安心蔬菜",
						src: "https://img14.360buyimg.com/n0/jfs/t1/100350/22/26643/139457/62507d69Eb3e831f1/c6212674eaf1e0c2.jpg"
					},
					{
						id: 3,
						name: "牛奶酸奶",
						src: "https://img12.360buyimg.com/n7/jfs/t1/58196/17/17370/147157/626df209E51c5a73a/eb5d922bb5bab76f.jpg"
					},
					{
						id: 4,
						name: "肉蛋禽类",
						src: "https://img14.360buyimg.com/n7/jfs/t1/184560/7/21988/213893/6233df9dEeef25ba6/0843c583d445abb9.jpg"
					},
				],
				shopList: [],
				paging:{
					allpages:0,
					thispage:0,
					pagesize:5
				}
			};
		},
		methods: {
			enter(e) {
				let id = e.currentTarget.dataset.id
				wx.navigateTo({
					url: "../../other_pages/shop_detail/shop_detail?shopId=" + id
				})
			},
			category(e) {
				let name = e.currentTarget.dataset.name
				wx.navigateTo({
					url: "../../other_pages/home_pages/home_pages?name=" + name
				})
			},
			coupon() {
				wx.navigateTo({
					url: "../../other_pages/used_coupon/used_coupon"
				})
			},
			fenye(){
				let paging=this.paging
				paging.allpages=Math.ceil(shopList.length/5)
				if(paging.thispage<paging.allpages){
					shopList.forEach((v,i) =>{if(i>=paging.thispage*paging.pagesize&&i<(paging.thispage+1)*paging.pagesize){this.shopList.push(v)}})
					paging.thispage+=1
				}else{
					wx.showToast({
						icon:'error',
						title: '没有更多数据'
					})
				}
			}
		},
		onLoad() {
			this.fenye()
			this.couponList = couponList
		},
		onReachBottom: function() {
			this.fenye()
		}
	}
</script>

<style lang="scss">
	.header {
		padding: 1vw;
		display: flex;
		align-items: center;
		width: 100vw;
		background-color: #ffffff;
	}

	.location {
		margin: 0 4vw 0 3vw;
	}

	.location image {
		width: 5vw;
		height: 5vw;
	}

	.icon-text {
		text-align: center;
		font-size: 2.5vw;
	}

	.search {
		height: 8vw;
		font-size: 3vw;
		display: flex;
		align-items: center;
		width: 77vw;
		background-color: #e6e6e6;
		border-radius: 5vw;
	}

	.search image {
		margin: 0 3vw;
		width: 5vw;
		height: 5vw;
	}

	.sesrch input {
		width: 60vw;
	}

	.swiper-item {
		width: 100vw;
	}

	.swiper-item image {
		width: 100%;
	}

	.category {
		display: flex;
		justify-content: space-around;
		margin: 3vh 0;
	}

	.category image {
		width: 12vw;
		height: 12vw;
		border-radius: 90%;
	}

	.category-text {
		text-align: center;
		font-size: 3vw;
	}

	.adventure {
		@extend .swiper-item;
		height: 40vw;
	}

	.coupon-head {
		padding: 2vh 0;
		text-align: center;
		margin: 0 auto;
		font-weight: 700;
	}

	.coupon-body {
		height: 20vw;
		border-radius: 8px;
		margin: 1vw;
		width: 55vw;
		display: flex;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.1)
	}

	.coupon-left {
		border-radius: 8px 0 0 8px;
		padding: 2vw;
		width: 50vw;
		background-color: #FEF3ED;
	}

	.amount-text1 {
		color: #FE0302;
		font-size: 20px;
		font-weight: 600;
	}

	.amount-text2 {
		color: #FE0302;
		font-size: 10px;
		margin-left: 13vw;
	}

	.coupon-date {
		margin-top: 4vw;
		font-size: 10px;
	}

	.coupon-right {
		font-weight: 600;
		border-radius: 0 8px 8px 0;
		color: #FE0302;
		padding: 2vw;
		font-size: 10px;
		width: 4vw;
		background-color: #fecaca;
	}

	.shop {
		width: 100vw;
		height: 25vw;
		margin: 1vw 0 1vw 0;
		padding: 3vw 3vw 0;
		display: flex;
		background-color: #dfe8ff;
	}

	.shop-img image {
		margin-right: 5vw;
		width: 20vw;
		height: 20vw;
	}

	.shop-detail {
		width: 67vw;
		height: 20vw;
	}

	.shop-detail-head {
		font-size: 13px;
		display: flex;
		justify-content: space-between;
	}

	.shop-text2 {
		padding: 1px;
		margin-right: 1vw;
		background-color: #ff958d;
		color: #ffffff;
		border-radius: 3px;
	}

	.shop-detail-middle {
		margin: 2.5vw 0;
	}

	.star {
		width: 4vw;
		height: 4vw;
	}

	.shop-detail-bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.shop-text5 {
		font-size: 10px;
		color: #00000060;
	}

	.shop-detail-bottom-img {
		margin: 0vw 0 -1vw 0;
	}

	.shop-detail-bottom-img image {
		margin: -1vw 0 0 0;
		width: 5vw;
		height: 5vw;
	}

	.shop-detail-bottom-button {
		border-radius: 5px;
		padding: 1px 3px;
		border: 1px solid #00000030;
		font-size: 13px;
		color: #ffffff;
		background-color: #a195ec;
	}

	.shop-text6 {
		font-size: 13px;
	}
</style>
